<template>
    <div>
        <div class="data-list">
            <div class="left">
                <span><el-icon>
                        <Tickets />
                    </el-icon></span>
                <span>数据列表</span>
            </div>
            <div>
                <button v-for="item in datalisttitle" :key="item.val" @click="changeShow">{{ item.val }}</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
let changeShow = () => {
    // console.log('点击了changeShow');
}
defineProps<{
    datalisttitle : Array<{
        val : string
    }>
}>()
</script>
 
<style lang="scss" scoped>
.data-list {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px 0 #9d9d9d;
    margin-bottom: 20px;

    div {
        button {
            padding: 6px 10px;
            margin: 0 10px;
            color: #666;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 12px;
            cursor: pointer;
        }
    }

    .left {
        display: flex;
        align-items: center;
    }
}</style>